interface IngThumbScope extends ng.IScope {
  
}

function ngThumb($window:ng.IWindowService){
    var helper = {
        support: !!((<any>window).FileReader && (<any>window).CanvasRenderingContext2D),
        isFile: function (item) {
            return angular.isObject(item) && item instanceof (<any>window).File;
        },
        isImage: function (file) {
            var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
            return '|jpg|png|jpeg|bmp|gif|tiff|'.indexOf(type) !== -1;
        }
    };
    return {
        template: '<canvas style="width:100%;height:100%;"/><img/>',
        restrict:'A',
        link:(scope : IngThumbScope, element : ng.IAugmentedJQuery, attributes : ng.IAttributes)=>{
            
            if (!helper.support) return;
            var clicked = false;
            var params = scope.$eval(attributes["ngThumb"]);
            if (!helper.isFile(params.file)) return;
            if (!helper.isImage(params.file)) return;
            var canvas:any = element.find('canvas');
            var imgName:any = element.find('img');
            imgName.attr("id", params.path)
            var reader = new FileReader();
            reader.onload = onLoadFile;
            reader.readAsDataURL(params.file);
            imgName.attr({ "src": params.path, "width": 600, "class": "hide" });
            var myimage:any = document.getElementById(params.path);
            function onLoadFile(event) {
                var img = new Image();
                img.onload = onLoadImage;
                img.src = event.target.result;
            }
            function onLoadImage() {
                var width = params.width || this.width / this.height * params.height;
                var height = params.height || this.height / this.width * params.width;
                canvas.attr({ width: width, height: height });
                canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
            }

            imgName.attr({ "src": params.path, "width": 600, "class": "hide" });
        

            element.bind('dblclick', function (e) {
             if (myimage) {
                 clicked = false;
                 $("#uploading > div > table > tbody > tr >td > div > img").addClass('hide');
                 imgName.removeClass("hide");
                 imgName.addClass("block");
                 $("body").css("overflow-y", "hidden");
                 imgName.css({
                                "z-index": "10000",
                                "width": "600px",
                                "position": "fixed",
                                "padding": "10px",
                                "background": "#fff",
                                "border-radius": "5px",
                                "cursor": "move"
                            });
                  popup(imgName);
                  //缩放
                    if (myimage.addEventListener) {
                        //?IE9,?Chrome,?Safari,?Opera ??
                        myimage.addEventListener("mousewheel", MouseWheelHandler, false);
                        //?Firefox ??
                        myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
                    }else myimage.attachEvent("onmousewheel", MouseWheelHandler);

                    var mausx = 0;
                    var mausy = 0;
                    var winx = 0;
                    var winy = 0;
                    var difx = mausx - winx;
                    var dify = mausy - winy;
                    imgName.mousemove(function (event) {
                        event.stopPropagation();
                        mausx = event.pageX;
                        mausy = event.pageY;
                        winx = imgName.offset().left;
                        winy = imgName.offset().top;
                        if (!clicked) {
                            difx = mausx - winx;
                            dify = mausy - winy;
                        }
                        var newx = event.pageX - difx - imgName.css("marginLeft").replace('px', '');
                        var newy = event.pageY - dify - imgName.css("marginTop").replace('px', '') - $(document).scrollTop();
                        imgName.css({ top: newy, left: newx });
                    });
                    imgName.mousedown(function (event) {
                        //取消默认操作;
                        event.preventDefault();
                        clicked = true;
                    });
                    imgName.mouseup(function (event) {
                        clicked = false;
                    });
                    imgName.click(function (event) {
                        event.stopPropagation();
                    });
                    
             }
             
                //关闭弹窗
                $("html").click(function (event) {
                    if (!imgName.hasClass("hide")) {
                        imgName.addClass("hide");
                        $("body").css("overflow-y", "scroll");
                    }
                });
                
                function MouseWheelHandler(e) {
                    var e = window.event || e;
                    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
                    myimage.style.width = Math.max(400, Math.min(1400, myimage.width + (60 * delta))) + "px";
                    e.preventDefault();
                    popup(imgName)
                    return false;
                }
                function popup(popupName) {
                    var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度 
                    _windowHeight = $(window).height(),//获取当前窗口高度 
                    _windowWidth = $(window).width(),//获取当前窗口宽度 
                    _popupHeight = popupName.height(),//获取弹出层高度 
                    _popupWeight = popupName.width(),//获取弹出层宽度 
                    _posiTop = (_windowHeight - _popupHeight) / 2 ,
                    _posiLeft = (_windowWidth - _popupWeight) / 2; 
                    popupName.css({ "left": _posiLeft + "px", "top": _posiTop + "px", "display": "block" });//设置position 
                }

                function onLoadFile(event) {
                    var img = new Image();
                    img.onload = onLoadImage;
                    img.src = event.target.result;
                }


         });


        }
    }
}
ngThumb['$inject'] = ["$window"];
angular.module('tms').directive('ngThumb', ngThumb);